<template>
  <div class="talent-item" v-for="(item, index) of talentList" :key="index" @click="gotoDetail(item.id)">
    <div class="talent-item-top">
      <div class="talent-item-pic">
        <img src="@/assets/img/icon/icon-message.png" alt="头像">
      </div>
      <div class="talent-item-cont">
        <h3>李想<span class="orange">驻场</span><span class="blue">远程</span><span class="green">全职</span></h3>
        <p>前端工程师&nbsp;&nbsp;|&nbsp;&nbsp;5年&nbsp;&nbsp;|&nbsp;&nbsp;本科&nbsp;&nbsp;|&nbsp;&nbsp;23岁</p>
        <dl>
          <dt>vue</dt>
          <dt>nodejs</dt>
          <dt>小程序</dt>
        </dl>
      </div>
    </div>
    <div class="talent-item-bottom">
      <label for="">已做2个项目</label>
      <span><van-icon name="location-o" />北京</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter()
const {talentList} = defineProps({
  talentList: {
    type: Array,
    default: () => []
  }
})
const gotoDetail = (id: any) => {
  router.push('/talent/details/' + id)
}
</script>
<style scoped>
.talent-item {
  margin: 0 0.64rem 0.53rem;
  padding: 0.77rem 0.64rem 0;
  background: #fff;
  border-radius: 0.53rem;
  font-size: 0.69rem;
}
.talent-item-top {
  display: flex;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f5f5f5;
}
.talent-item-pic {
  margin-right: 0.85rem;
  width: 4rem;
  height: 4rem;
  border-radius: 0.27rem;
  overflow: hidden;
}
.talent-item-pic img {
  width: 100%;
  height: 100%;
}
.talent-item-cont {

}
.talent-item-cont h3 {
  display: flex;
  align-items: center;
  margin-bottom: 0.64rem;
  font-size: 0.91rem;
  font-weight: 400;
  color: #333;
}
.talent-item-cont h3 span {
  padding: 0.1rem 0;
  width: 1.97rem;
  height: 0.85rem;
  line-height: 0.85rem;
  border-radius: 0.53rem;
  font-size: 0.59rem;
  font-weight: 300;
  color: #fff;
  margin-left: 0.2rem;
  text-align: center;
}
.talent-item-cont h3 span.orange {
  background: linear-gradient(90deg, #FEA829, #FE8F27);
}
.talent-item-cont h3 span.green {
  background: linear-gradient(90deg, #55ED89, #52DEA4);
}
.talent-item-cont h3 span.blue {
  background: linear-gradient(90deg, #42C3E8, #249AF6);
}
.talent-item-cont p {
  margin-bottom: 0.56rem;
  font-size: 0.69rem;
  line-height: 0.69rem;
  font-weight: 100;
  color: #666;
}
dl {
  display: flex;
}
dl dt {
  margin-right: 0.27rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.59rem;
  line-height: 0.59rem;
  font-weight: 300;
  color: #666;
  background: #f6f7f8;
  border-radius: 0.16rem;
}
.talent-item-bottom {
  display: flex;
  padding: 0.72rem 0 0.72rem;
}
.talent-item-bottom label {
  flex: 1;
}
.talent-item-bottom span {
  text-align: right;
}
.talent-item-bottom i {
  margin-right: 0.1rem;
  font-size: 0.8rem;
  font-weight: 600;
}
</style>